<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
{%load i18n %}
<!-- Django project-->
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title type="text/css">
			Project Django
		</title>

		<link rel="stylesheet" href="{{STATIC_URL}}style/style_content.css"> </link>
       		 <script type="text/javascript" src="{{STATIC_URL}}js_content/jquery-1.6.1.min.js"></script>
        	 <script type="text/javascript" src="{{STATIC_URL}}js_content/jquery.animation.easing.js"></script>
       		 <script type="text/javascript" src="{{STATIC_URL}}js_content/jquery.mousewheel.min.js"></script>
        	 <script type="text/javascript" src="{{STATIC_URL}}js_content/script.js"></script>
   		     <script type="text/javascript" src="{{STATIC_URL}}js_content/jquery-ui.min.js" ></script>
    		 <script type="text/javascript" src="{{STATIC_URL}}js_content/buttons.js"></script>
            <script language="javascript" src="{{STATIC_URL}}js_content/modal.popup.js"></script>
            <script type="text/javascript" src="{{STATIC_URL}}js_content/jquery-easing-1.3.pack.js"></script>
            <script type="text/javascript" src="{{STATIC_URL}}js_content/jquery-easing-compatibility.1.2.pack.js"></script>
            <script type="text/javascript" src="{{STATIC_URL}}js_content/coda-slider.1.1.1.pack.js"></script>

        <script type="text/javascript">
            var theInt = null;
            var $crosslink, $navthumb;
            var curclicked = 0;

            theInterval = function(cur){
                clearInterval(theInt);

                if( typeof cur != 'undefined' )
                    curclicked = cur;

                $crosslink.removeClass("active-thumb");
                $navthumb.eq(curclicked).parent().addClass("active-thumb");
                $(".stripNav ul li a").eq(curclicked).trigger('click');

                theInt = setInterval(function(){
                    $crosslink.removeClass("active-thumb");
                    $navthumb.eq(curclicked).parent().addClass("active-thumb");
                    $(".stripNav ul li a").eq(curclicked).trigger('click');
                    curclicked++;
                    if( 6 == curclicked )
                        curclicked = 0;

                }, 3000);
            };

            $(function(){

                $("#main-photo-slider").codaSlider();

                $navthumb = $(".nav-thumb");
                $crosslink = $(".cross-link");

                $navthumb
                        .click(function() {
                            var $this = $(this);
                            theInterval($this.parent().attr('href').slice(1) - 1);
                            return false;
                        });

                theInterval();
            });
        </script>
		<script type="text/javascript">
       		 $(document).ready(function(){
          	  $(".featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
                    var align = 'center';									//Valid values; left, right, center
                    var top = 20; 											//Use an integer (in pixels)
                    var width = 1000; 										//Use an integer (in pixels)
                    var padding = 10;										//Use an integer (in pixels)
                    var backgroundColor = '#FFFFFF'; 						//Use any hex code
                   						//Refer to any page on your server, external pages are not valid e.g. http://www.google.co.uk
                    var borderColor = '#333333'; 							//Use any hex code
                    var borderWeight = 0; 									//Use an integer (in pixels)
                    var borderRadius = 0; 									//Use an integer (in pixels)
                    var fadeOutTime = 300; 									//Use any integer, 0 = no fade
                    var disableColor = '#333'; 							//Use any hex code
                    var disableOpacity = 98; 								//Valid range 0-100
                    var loadingImage = '{{STATIC_URL}}images/loading.gif';		//Use relative path from this page

                    //This method initialises the modal popup
                    $(".modal").click(function() {
                        s=$(this).attr('name');
                        var source =s;
                        modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, source, loadingImage);
                    });

                    //This method hides the popup when the escape key is pressed

       		 });
    		</script>
        <script type="text/javascript">

        </script>
        <script type="text/javascript" >
            $(document).ready(function(){

                $('.modal').bind('contextmenu',function(e){
                    link=$(this).attr("name");
                    var $cmenu = $('.vmenu');
                    $('<div class="overlay"></div>').css({left : '0px', top : '0px',position: 'absolute', width:                                                   '100%', height: '100%', zIndex: '100' }).click(function() {
                        $(this).remove();
                        $cmenu.hide();
                    }).bind('contextmenu' , function(){return false;}).appendTo(document.body);
                    $('.vmenu').css({ left: e.pageX, top: e.pageY, zIndex: '101' }).show();

                    return false;
                });

                $('.vmenu .first_li').live('click',function() {
                    if( $(this).children().size() == 1 ) {
                        link=link+"?state=newtab";
                        window.open(link, '_blank');
                        $('.vmenu').hide();
                        $('.overlay').hide();
                    }
                });

                $('.vmenu .inner_li span').live('click',function() {
                    alert($(this).text());
                    $('.vmenu').hide();
                    $('.overlay').hide();
                });


                $(".first_li , .sec_li, .inner_li span").hover(function () {
                            $(this).css({backgroundColor : '#E0EDFE' , cursor : 'pointer'});
                            if ( $(this).children().size() >0 )
                                $(this).find('.inner_li').show();
                            $(this).css({cursor : 'default'});
                        },
                        function () {
                            $(this).css('background-color' , '#fff' );
                            $(this).find('.inner_li').hide();
                        });


            });
        </script>
        <script type="text/javascript">
            function addLike(userLike, comID) {

                /*if ('{% if not user.is_authenticated %}') {
                    alert("Hãy đăng ký hoặc đăng nhập để bình luận bài viết!");
                    endif = '{% endif %}';
                    return false;
                }*/
                //alert(userLike + "  " + comID)
                $.post(
                        // Grad the url .
                        "/addLike/",
                        {'commentID': comID, 'csrfmiddlewaretoken': '{{ csrf_token }}'},
                        function(resp, testStatus) {
                            if (resp.error) {
                                alert("Hãy đăng nhập!")
                                window.location = '/login/';
                            } else {
                                //alert(resp.voted);
                                $("#Vote_"+comID).html("Voted");
                                $("#Vote_"+comID).attr('onclick', "");
                                $("#Count_"+comID).html(resp.voted);
                            }

                        }, "json"
                );
                return false;
            }
        </script>
        <script type="text/javascript">
            function test(content, userid, articleid) {

                /*if ('{% if not user.is_authenticated %}') {
                    alert("Hãy đăng ký hoặc đăng nhập để bình luận bài viết!");
                    endif = '{% endif %}';
                    return false;
                }*/
                $.post(
                        // Grab the action url from the form.
                        "/addComment/",

                        // Serialize the form data to send.
                        {'content': content, 'userid': userid, 'articleid': articleid, 'csrfmiddlewaretoken': '{{ csrf_token }}'},

                        // Callback function to handle the response from view.
                        function(resp, testStatus) {
                            if (resp.error) {

                            } else {
                                //alert(resp.postOnDate);
                                //alert("Da comment" + resp.commentID);
                                //No errors. Rewrite the category list.
                                $("#post_cm").fadeTo('fast', 0);

                                var text = new String();
                                /*text = "<div class='line_cm'>" + "</div>"
                                        + "<div class='detail_cm'>"
                                        + "<img src='{{STATIC_URL}}images/b.jpg'/>"
                                        + "<p> <a href=''>" + resp.userName + "</a>" + resp.comments + "</p>"
                                        + "<div class='info_cm'>"
                                        + "<ul>"
                                        + "<li>"+resp.postOnDate+"</li>"
                                        + "<li id='Vote_"+resp.commentID+"' onclick='addLike(document.getElementById('{{user.id}}').value,"+reps.commentID+")>"+"<a href='#'>Vote</a></li>"
                                        + "<li><a href='' class='spam'>Spam</a></li>"
                                        + "<li><a id='Count_"+resp.commentID+"'>0</a> Voted</li>"
                                        + "</ul>"
                                        + "</div>"
                                        + "</div>";*/
                                text = "<div class='line_cm'>"+"</div>"
                                        +"<div class='detail_cm'>"
                                        +"<img src='{{STATIC_URL}}images/b.jpg'/>"
                                        +"<p> <a href='#'>"+resp.userName+"</a>"+resp.comments+"</p>"
                                        +"<div class='info_cm'>"
                                        +"<ul>"
                                        +"<li>"+resp.postOnDate+"</li>"
                                        +"<li id='Vote_"+resp.commentID+"' onclick=\"addLike(document.getElementById('userid').value, "+resp.commentID+")\"><a href='#'>Vote</a></li>"
                                        +"<li><a href='#' class='spam'>Spam</a></li>"
                                        +"<li><a id='Count_"+resp.commentID+"'>0</a> Voted</li>"
                                        +"</ul>"
                                        +"</div>"
                                        +"</div>";
                                //for(i=0; i<resp.comments.length ;i++){
                                //    var m = resp.comments[i]
                                //    text += "<li>" + m + "</li>"
                                //}
                                //alert(text);
                                $("#post_cm").append(text);
                                //$("#comments").html(text);
                                $("#post_cm").fadeTo('slow', 1);
                                $("#content").fadeTo('fast', 0);
                                $("#content").html("");
                                $("#content").fadeTo('slow', 1);

                                document.getElementById("user_cm").innerHTML = document.getElementById("user_cm").innerHTML;
                            }

                            // Set the Return data type to "json".
                        }, "json");
            }
        </script>
    </head>

	<body>
    <input type="hidden" id="start" name="{{pos}}"/>
    <div class="vmenu">
        <div class="first_li"><span>Open</span></div>
        <div class="first_li"><span>Open in new tab</span></div>
        <div class="sep_li"></div>

        <div class="first_li"><span>Quick Preview</span>
        </div>
        <div class="first_li"><span>Preview</span>
        </div>
    </div>
	<!-- begin wrapper-->
			<!--begin header-->
	<div id="header">
				<div id="sub_header">

				<!--logo-->
				<a href="#">
					<div id="logo">
					</div>
				</a>
				<!--end logo-->

				<!--begin main_unity-->

				<!-->

				<!--begin main menu-->
				<div id="menu">
					<ul>
						<li>
							<a href="#" id="thethao">
								{% trans 'Thể Thao' %}
							</a>
						</li>
                        <li>
                            <a href="#" id="congnghe">
                                {% trans 'Công Nghệ' %}
                            </a>
                        </li>
						<li>

							<a href="#" id="giaitri">
                                {% trans 'Giải Trí' %}
							</a>
						</li>

						<li>
							<a href="#" id="phapluat">
                                {% trans 'Tổng Hợp' %}
							</a>
						</li>
					</ul>
					<!--search box-->
					<search>
                        <form action="/search/" method="post">{% csrf_token %}
                            <input style="border:1px solid #ccc;" name="keywords" id="keywords" type="text" size="40" placeholder="Search..." />
                            <input type="submit"class="submit_btn" value="">
                        </form>
					</search>
					<!--end search box-->
				</div>
        	<!--end main menu-->
                    <div id="menu_unity">
                        <ul>
                            {% if not user.is_authenticated %}
                            <div id="login_box">
                                <div id="login_box_content">
                                    <form id="login_form" action="/login/?next={{ next|default:'/' }}" method="post">{% csrf_token %}
                                        <h2 style="text-align:center;color:#fff;">{% trans 'Đăng nhập' %}</h2>
                                        <input type="text" placeholder="{% trans 'Tên đăng nhập...' %}" name="username" id="username"/>
                                        <input type="password" placeholder="Password" name="password" id="password"/>
                                        <input type="submit" value="{% trans 'Đăng nhập' %}"/>
                                    </form>
                                    <div id="cancel1">
                                        <a href="#" class="can">{% trans 'Hủy bỏ' %}</a>
                                        <a href="#">{% trans 'Quên mật khẩu' %}</a>
                                    </div>
                                </div>
                                <!--
                            </div>
                                <div id="regis_box">
                                <div id="regis_box_content">
                                <form id="regis_form" action="/register/" method="post">{% csrf_token %}
                                    <h2 style="text-align:center;color:#fff;">Đăng kí tài khoản</h2>
                                    <h5>Tên đăng nhập</h5>
                                    <input type="text" placeholder="Tên đăng nhập bạn mong muốn của bạn"/>
                                     <h5>Họ và tên</h5><input type="text" class="name1" placeholder="Nhập họ của bạn" />
                                     <input type="text" class="name2" placeholder="Nhập tên đệm và tên" />
                                    <h5>Email</h5><input type="text" placeholder="Email chính xác của bạn" />
                                    <h5>Password</h5><input type="password" placeholder="Mật khẩu dùng để truy cập website" />
                                    <h5>Nhập lại password</h5><input type="password" class="last"placeholder="Nhập lại mật khẩu trên" /> 							<input type="submit" value="Đăng kí"/>
                                     <input type="reset" value="Nhập lại"/>

                                 </form>
                                <div id="cancel2">
                                    <a href="#" class="can">Hủy bỏ đăng kí</a>
                                </div>
                                </div>
                                -->
                            </div>
                            {% endif %}
                            <li>
                                <form action="/i18n/setlang/" method="post">{% csrf_token %}
                                    <input name="next" type="hidden" value="/"/>
                                    <select name="language" class="language">
                                        {% for lang in LANGUAGES %}
                                        <option value="{{ lang.0 }}">{{ lang.1 }}</option>
                                        {% endfor %}
                                    </select>
                                    <input type="submit" value="{% trans 'Chuyển ngôn ngữ' %}">
                                </form>
                                <!--<select class="language">
                                    <option>
                                        {% trans 'Tiếng Việt' %}
                                    </option>
                                    <option>
                                        English
                                    </option>

                                </select>-->
                            </li>
                            {% if user.is_authenticated %}

                            <li>
                                <a href="/logout/?next={{ next|default:'/' }}">
                                    {% trans 'Đăng xuất' %}
                                </a>
                            </li>
                            <li>
                                {% trans 'Chào'%}, <a href="/profile/" style="color: #0688ff; font-size: 15px" >{{user}}</a>
                            </li>
                            {% else %}
                            <li>
                                <a href="/login/">
                                    {% trans 'Đăng Nhập' %}
                                </a>
                            </li>
                            <li>
                                <a href="/register/">
                                    {% trans 'Đăng Kí' %}
                                </a>
                            </li>
                            {% endif %}
                        </ul>
                    </div>

     </div>
     </div>
       <div id="wrapper">
     <div id="place">
         <div id="name1">
             {% trans 'Thể thao'%}
         </div>
        <div id="wrapper1">

         <div class="content1_page">
             <h2 class="ch2">{% trans 'Ngoại hạng anh' %}</h2>
             {% autoescape off %}
             <h3 class="ch3"><a class="modal" href="javascript:void(0)" name={{ngoaihang_title.link}}>{{ngoaihang_title.title }}</a>

             </h3>
                <div class="title"> {{ngoaihang_title.description}}</div>
                 <div class="other">
                     <ul>
                         {% for ar in ngoaihang %}
                         <li><a class="modal" href="javascript:void(0)" name="{{ar.link}}">{{ ar.title }}</a></li>
                         {% endfor %}
                     </ul>
                 </div>
             {% endautoescape %}

         </div>
         <div class="content3_page">
             <h2 class="ch2">{% trans 'Tin tức khác' %}</h2>
             {% autoescape off %}
             <h3 class="ch3"><a class="modal" href="javascript:void(0)" name="{{champ_title.link}}">{{ champ_title.title }}</a></h3>
             <div class="title"> {{champ_title.description}}</div>
             <div class="other">
                 <ul>
                     {% for ar2 in champ %}
                     <li><a class="modal" href="javascript:void(0)" name="{{ar2.link}}">{{ ar2.title }}</a></li>
                     {% endfor %}
                 </ul>
             </div>
             {% endautoescape %}

         </div>
         <div class="content2_page">
             <h2 class="ch2">Laliga</h2>
             {% autoescape off %}
             <h3 class="ch3"><a class="modal" href="javascript:void(0)" name="{{laliga_title.link}}">{{ laliga_title.title }}</a></h3>
             <div class="title"> {{laliga_title.description}}</div>
             <div class="other">
                 <ul>
                     {% for ar in laliga %}
                     <li><a class="modal" href="javascript:void(0)" name="{{ar.link}}">{{ ar.title }}</a></li>
                     {% endfor %}
                 </ul>
             </div>
             {% endautoescape %}

         </div>
         <div class="content4_page">
             <h2 class="ch2">Euro 2012</h2>
             {% autoescape off %}
             <h3 class="ch3"><a class="modal" href="javascript:void(0)" name="{{euro_title.link}}">{{ euro_title.title }}</a></h3>
             <div class="title"> {{euro_title.description}}</div>
             <div class="other">
                 <ul>
                     {% for ar in euro %}
                     <li><a class="modal" href="javascript:void(0)" name="{{ar.link}}">{{ ar.title }}</a></li>
                     {% endfor %}
                 </ul>
             </div>
             {% endautoescape %}
         </div>
         <div class="content5_page">
             <h2 class="ch2" style="width:400px;">Champoins League</h2>
             {% autoescape off %}
             <h3 class="ch3"><a href="javascript:void(0)" name="{{champon.link}}" class="modal">{{ champon.title }}</a></h3>
             <div class="title"> {{champon.description}}</div>
             {% endautoescape %}
         </div>
               <div class="featured" >
             <ul class="ui-tabs-nav">
                 <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"></a></li>
                 <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-5"><a href="#fragment-5"></a></li>
                 <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"></a></li>
                 <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"></a></li>
                 <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"></a></li>
             </ul>

             <!-- First Content -->
                <div id="fragment-1" class="ui-tabs-panel" style="">
                    {% autoescape off %}
                    {{s1.image}}
                    <div class="info" >
                        <h2><a href="javascript:void(0)" name="{{s1.link}}" class="modal">{{s1.title}}</a></h2>
                    </div>
                    {% endautoescape%}
                </div>

                <!-- Second Content -->
                <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
                    {% autoescape off %}
                    {{s2.image}}
                    <div class="info" >
                        <h2><a href="javascript:void(0)" name="{{s2.link}}" class="modal">{{s2.title}}</a></h2>
                    </div>
                    {% endautoescape%}
                </div>
                <div id="fragment-5" class="ui-tabs-panel ui-tabs-hide" style="">
                    {% autoescape off %}
                    {{s3.image}}
                    <div class="info" >
                        <h2><a href="javascript:void(0)" name="{{s3.link}}" class="modal">{{s3.title}}</a></h2>
                    </div>
                    {% endautoescape%}
                </div>

                <!-- Third Content -->
                <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
                    {% autoescape off %}
                    {{s4.image}}
                    <div class="info" >
                        <h2><a href="javascript:void(0)" name="{{s4.link}}" class="modal">{{s4.title}}</a></h2>
                    </div>
                    {% endautoescape%}
                </div>

                <!-- Fourth Content -->
                <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
                    {% autoescape off %}
                    {{s5.image}}
                    <div class="info" >
                        <h2><a href="javascript:void(0)" name="{{s5.link}}" class="modal">{{s5.title}}</a></h2>
                    </div>
                    {% endautoescape%}
                </div>

            </div>
			</div>
			    <div id="button1to2"></div>
			    <div id="button2to1"></div>
			    <div id="name2">{% trans 'Công Nghệ' %}</div>
			<div id="wrapper2">
			    <div class="content1_page2">
                    {% autoescape off %}
                    <h3 class="ch3" style="margin-top: 15px;padding-bottom: 15px;"><a href="javascript:void(0)" name="{{tech1.link}}" class="modal">{{ tech1.title }}</a></h3>
                    <div class="title_page3"> {{tech1.description}}</div>
                    {% endautoescape %}
			    </div>
			    <div class="content2_page2">
                    {% autoescape off %}
                    <h3 class="ch3" style="margin-top: 15px;padding-bottom: 15px;"><a href="javascript:void(0)" name="{{tech2.link}}" class="modal">{{ tech2.title }}</a></h3>
                    <div class="title_page3"> {{tech2.description}}</div>
                    {% endautoescape %}
			    </div>
                <div class="content4_page2">
                    {% autoescape off %}
                    <h3 class="ch3" style="margin-top: 15px;padding-bottom: 15px;"><a href="javascript:void(0)" name="{{tech3.link}}" class="modal">{{ tech3.title }}</a></h3>
                    <div class="title_page3"> {{tech3.description}}</div>
                    {% endautoescape %}
                </div>
                <div class="content3_page2">
                    {%for oth in other%}
                    {% autoescape off %}
                    <h3 class="ch3" style="padding-top:20px;margin-bottom:0px; width:350px; padding-bottom:10px;font-size: 13px;font-style:normal;color:#555"><a style=" font-style:normal;" href="javascript:void(0)" name="{{oth.link}}" class="modal">{{ oth.title }}</a></h3>
                    <div class="content3_page2_line"></div>
                    {% endautoescape %}
                    {%endfor%}
                </div>
                <div class="content5_page2">
                    {% autoescape off %}
                    <h3 class="ch3" style="margin-top: 15px;padding-bottom: 15px;"><a href="javascript:void(0)" name="{{tech4.link}}" class="modal">{{ tech4.title }}</a></h3>
                    <div class="title_page3"> {{tech4.description}}</div>
                    {% endautoescape %}
                </div>

                <div class="content7_page2">
                    {% autoescape off %}
                    <h3 class="ch3" style="margin-top: 15px;padding-bottom: 15px;"><a href="javascript:void(0)" name="{{tech5.link}}" class="modal">{{ tech5.title }}</a></h3>
                    <div class="title_page3"> {{tech5.description}}</div>
                    {% endautoescape %}
                </div>
                <div class="content8_page2">
                    {% autoescape off %}
                    <h3 class="ch3" style="margin-top: 15px;padding-bottom: 15px;"><a href="javascript:void(0)" name="{{tech6.link}}" class="modal">{{ tech6.title }}</a></h3>
                    <div class="title_page3"> {{tech6.description}}</div>
                    {% endautoescape %}
                </div>

			</div>
         <div id="button2to3"></div>
         <div id="button3to2"></div>
         <div id="name3">{% trans 'Giải Trí' %}</div>
		 <div id="wrapper3">
			    <div class="content1_page">
                    <h2 class="ch2">{% trans 'Văn Hóa'%}</h2>
                    {% autoescape off %}
                    <h3 class="ch3"><a class="modal" href="javascript:void(0)" name={{vanhoa_title.link}}>{{vanhoa_title.title }}</a></h3>
                    <div class="title_page2"> {{vanhoa_title.description}}</div>
                    <div class="other">
                        <ul>
                            {% for ar in vanhoa %}
                            <li><a class="modal" href="javascript:void(0)" name="{{ar.link}}">{{ ar.title }}</a></li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endautoescape %}

                </div>
			    <div class="content2_page">
                    <h2 class="ch2">{% trans 'Thời Trang' %}</h2>
                    {% autoescape off %}
                    <h3 class="ch3"><a class="modal" href="javascript:void(0)" name={{thoitrang_title.link}}>{{thoitrang_title.title }}</a></h3>
                    <div class="title_page2"> {{thoitrang_title.description}}</div>
                    <div class="other">
                        <ul>
                            {% for ar in thoitrang %}
                            <li><a class="modal" href="javascript:void(0)" name="{{ar.link}}">{{ ar.title }}</a></li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endautoescape %}

                </div>
			    <div class="content3_page">
                    <h2 class="ch2">{% trans 'Âm Nhạc'%}</h2>
                    {% autoescape off %}
                    <h3 class="ch3"><a class="modal" href="javascript:void(0)" name={{amnhac_title.link}}>{{amnhac_title.title }}</a></h3>
                    <div class="title_page2"> {{amnhac_title.description}}</div>
                    <div class="other">
                        <ul>
                            {% for ar in amnhac %}
                            <li><a class="modal" href="javascript:void(0)" name="{{ar.link}}">{{ ar.title }}</a></li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endautoescape %}
			    </div>
			    <div class="content4_page">
                    <h2 class="ch2">{% trans 'Điện Ảnh'%}</h2>
                    {% autoescape off %}
                    <h3 class="ch3"><a class="modal" href="javascript:void(0)" name={{phim_title.link}}>{{phim_title.title }}</a></h3>
                    <div class="title_page2"> {{phim_title.description}}</div>
                    <div class="other">
                        <ul>
                            {% for ar in phim %}
                            <li><a class="modal" href="javascript:void(0)" name="{{ar.link}}">{{ ar.title }}</a></li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endautoescape %}
			    </div>
			    <div class="content5_page">
                    <h2 class="ch2" style="width:400px;">{% trans 'Tin tức khác' %}</h2>
                    {% autoescape off %}

                    <div class="other">
                        <ul>
                            {% for ar in orther %}
                            <li><a class="modal" href="javascript:void(0)" name="{{ar.link}}">{{ ar.title }}</a></li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endautoescape %}
			    </div>
             <div class="slider-wrap">
                 <div id="main-photo-slider" class="csw">
                     <div class="panelContainer">

                         <div class="panel" title="Panel 1">
                             <div class="wrapper">
                                 {% autoescape off %}
                                 {{e1.image}}
                                 <div class="photo-meta-data" >
                                     <h2><a style="text-decoration: none" href="javascript:void(0)" name={{e1.link}} class="modal">{{e1.title}}</a></h2>
                                 </div>
                                 {% endautoescape%}
                             </div>
                         </div>
                         <div class="panel" title="Panel 2">
                             <div class="wrapper">
                                 {% autoescape off %}
                                 {{e2.image}}
                                 <div class="photo-meta-data" >
                                     <h2><a style="text-decoration: none"href="javascript:void(0)" name={{e2.link}} >{{e2.title}}</a></h2>
                                 </div>
                                 {% endautoescape%}
                             </div>
                         </div>
                         <div class="panel" title="Panel 3">
                             <div class="wrapper">

                                 {% autoescape off %}
                                 {{e3.image}}
                                 <div class="photo-meta-data" >
                                     <h2><a style="text-decoration: none" href="javascript:void(0)" name={{e3.link}} >{{e3.title}}</a></h2>
                                 </div>
                                 {% endautoescape%}
                             </div>
                         </div>
                         <div class="panel" title="Panel 4">
                             <div class="wrapper">
                                 {% autoescape off %}
                                 {{e4.image}}
                                 <div class="photo-meta-data" >
                                     <h2><a style="text-decoration: none"href="javascript:void(0)" name={{e4.link}} >{{e4.title}}</a></h2>
                                 </div>
                                 {% endautoescape%}
                             </div>
                         </div>
                         <div class="panel" title="Panel 5">
                             <div class="wrapper">
                                 {% autoescape off %}
                                 {{e5.image}}
                                 <div class="photo-meta-data" >
                                     <h2><a style="text-decoration: none" href="javascript:void(0)" name={{e5.link}} >{{e5.title}}</a></h2>
                                 </div>
                                 {% endautoescape%}
                             </div>
                         </div>


                     </div>
                 </div>
             </div>
			</div>
         <div id="button3to4"></div>
         <div id="button4to3"></div>
         <div id="name4">{% trans 'Tin Tổng Hợp' %}</div>
		<div id="wrapper4">
            <div class="content1_page2">
                {% autoescape off %}
                <h3 class="ch3" style="margin-top: 15px;padding-bottom: 15px;"><a href="javascript:void(0)" name="{{t1.link}}" class="modal">{{ t1.title }}</a></h3>
                <div class="title_page3"> {{t1.description}}</div>
                {% endautoescape %}
            </div>
            <div class="content2_page2">
                {% autoescape off %}
                <h3 class="ch3" style="margin-top: 15px;padding-bottom: 15px;"><a href="javascript:void(0)" name="{{t2.link}}" class="modal">{{ t2.title }}</a></h3>
                <div class="title_page3"> {{t2.description}}</div>
                {% endautoescape %}
            </div>
            <div class="content4_page2">
                {% autoescape off %}
                <h3 class="ch3" style="margin-top: 15px;padding-bottom: 15px;"><a href="javascript:void(0)" name="{{t3.link}}" class="modal">{{ t3.title }}</a></h3>
                <div class="title_page3"> {{t3.description}}</div>
                {% endautoescape %}
            </div>
            <div class="content3_page2">
                {%for oth in tong%}
                {% autoescape off %}
                <h3 class="ch3" style="padding-top:20px;margin-bottom:0px; width:350px; padding-bottom:10px;font-size: 13px;font-style:normal;color:#555"><a style=" font-style:normal;" href="javascript:void(0)" name="{{oth.link}}" class="modal">{{ oth.title }}</a></h3>
                <div class="content3_page2_line"></div>
                {% endautoescape %}
                {%endfor%}
            </div>
            <div class="content5_page2">
                {% autoescape off %}
                <h3 class="ch3" style="margin-top: 15px;padding-bottom: 15px;"><a href="javascript:void(0)" name="{{t4.link}}" class="modal">{{ t4.title }}</a></h3>
                <div class="title_page3"> {{t4.description}}</div>
                {% endautoescape %}
            </div>

            <div class="content7_page2">
                {% autoescape off %}
                <h3 class="ch3" style="margin-top: 15px;padding-bottom: 15px;"><a href="javascript:void(0)" name="{{t5.link}}" class="modal">{{ t5.title }}</a></h3>
                <div class="title_page3"> {{t5.description}}</div>
                {% endautoescape %}
            </div>
            <div class="content8_page2">
                {% autoescape off %}
                <h3 class="ch3" style="margin-top: 15px;padding-bottom: 15px;"><a href="javascript:void(0)" name="{{t6.link}}" class="modal">{{ t6.title }}</a></h3>
                <div class="title_page3"> {{t6.description}}</div>
                {% endautoescape %}
            </div>
			</div>
		</div>
     </div>
		<!--footer-->
		<div id="footer">
		    	<div id="sub_footer">
					<ul>
						<li class="logo">
							<img src="{{STATIC_URL}}images/logo_footer.jpg"/>
						</li>
						<li class="copy">
							<b>
								© 2012 HCMUT<br>
								All rights reserved
							</b>
						</li>
						<li>

						</li>
						<li>

						</li>
						<li>
						</li>
						<li>
							<h4><a href="#">{% trans 'Thông tin'%} </a></h4>
						</li>
						<li>
							<h4><a href="#">{% trans 'Liên hệ'%}</a></h4>
						</li>
						<li>
							<h4><a href="#">{% trans 'Đặt làm trang chủ'%}</a></h4>
						</li>
						<li>
							<h4><a href="#">{% trans 'Tuyển dụng'%}</a></h4>
						</li>
						<li>
							<h4><a href="#">{% trans 'Trang chủ'%} </a></h4>
						</li>
					</ul>
				</div>
			<!--end footer-->
		</div>
	</body>
</html>
